<template>
  <el-row class="boxrow">
    <el-col :span="19">
      <i class="el-icon-s-home"></i>
      <span :class="{ treeNode: item.isTop }">{{ item.name }}</span>
    </el-col>
    <el-col :span="5">
      <!-- 右侧操作块 -->
      <el-row class="rightrow">
        <el-col :span="12">{{ item.manager }}</el-col>
        <el-col :span="12">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!item.isTop" command="edit"
                >查看部门</el-dropdown-item
              >
              <el-dropdown-item v-if="!item.isTop" command="del"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <!-- 右侧操作块 -->
    </el-col>
  </el-row>
</template>

<script>
import { delDepartmentAPi } from '@/api/department'
export default {
  name: 'tree-tool',
  props: ['item'],
  methods: {
    async handleCommand(command) {
      switch (command) {
        case 'add':
          this.$emit('openAdd', this.item)
          break
        case 'edit':
          console.log('edit')
          this.$emit('openEdit', this.item)

          break
        case 'del':
          try {
            await this.$confirm('此操作将不可逆转, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })

            await delDepartmentAPi(this.item.id)
            this.$emit('refreshParts')
          } catch {
            console.log('取消')
          }

          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxrow {
  width: 100%;
  font-size: 14px;
  .treeNode {
    font-weight: 700;
  }
  .el-icon-s-home {
    margin-right: 10px;
  }
  .rightrow {
    display: flex;
    justify-content: end;
    min-width: 130px;
    text-align: right;
  }
}
</style>